{include file="public/header" /}
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
    .editor {
        width:95%;
        min-height: 300px;
    }
    .uploader-container{
        position: relative;
        padding: 15px;
        margin: 15px 0;
        background-color: #fafafa;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
        border-color: #e5e5e5 #eee #eee;
        border-style: solid;
        border-width: 1px 0;
    }
    .uploader-list {
        width: 110px;
        overflow: hidden;
    }
    #picker {
        display: inline-block;
        line-height: 1.428571429;
        vertical-align: middle;
        margin: 0 12px 0 0;
    }
    #picker .webuploader-pick {
        padding: 6px 12px;
        display: block;
    }


    #uploader .thumbnail {
        width: 110px;
    }
    #uploader .thumbnail img {
        width: 100%;
    }
    .uploader-list {
        width: 100%;
        overflow: hidden;
    }
    .file-item {
        float: left;
        position: relative;
        margin: 0 20px 20px 0;
        padding: 4px;
    }
    .file-item .error {
        position: absolute;
        top: 4px;
        left: 4px;
        right: 4px;
        background: red;
        color: white;
        text-align: center;
        height: 20px;
        font-size: 14px;
        line-height: 23px;
    }
    .file-item .info {
        position: absolute;
        left: 4px;
        bottom: 4px;
        right: 4px;
        height: 20px;
        line-height: 20px;
        text-indent: 5px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        overflow: hidden;
        white-space: nowrap;
        text-overflow : ellipsis;
        font-size: 12px;
        z-index: 10;
    }
    .upload-state-done:after {
        content:"\f00c";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 32px;
        position: absolute;
        bottom: 0;
        right: 4px;
        color: #4cae4c;
        z-index: 99;
    }
    .file-item .progress {
        position: absolute;
        right: 4px;
        bottom: 4px;
        height: 3px;
        left: 4px;
        height: 4px;
        overflow: hidden;
        z-index: 15;
        margin:0;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    .file-item .progress span {
        display: block;
        overflow: hidden;
        width: 0;
        height: 100%;
        background: #d14 url(/static/js/webuploader/image-upload/progress.png) repeat-x;
        -webit-transition: width 200ms linear;
        -moz-transition: width 200ms linear;
        -o-transition: width 200ms linear;
        -ms-transition: width 200ms linear;
        transition: width 200ms linear;
        -webkit-animation: progressmove 2s linear infinite;
        -moz-animation: progressmove 2s linear infinite;
        -o-animation: progressmove 2s linear infinite;
        -ms-animation: progressmove 2s linear infinite;
        animation: progressmove 2s linear infinite;
        -webkit-transform: translateZ(0);
    }
    @-webkit-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @-moz-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
</style>
<link rel="stylesheet" type="text/css" href="/static/admin/js/webuploader/webuploader.css">
<script type="text/javascript" src="/static/admin/js/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="/static/admin/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/admin/js/ueditor/ueditor.all.min.js"> </script>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('article/index')}">文章列表</a></li>
        <li class="active">
            <a href="javascript:;">
                {if condition="$params['action'] eq 'edit'" }
                编辑文章
                {else /}
                添加文章
                {/if}
            </a>
        </li>
    </ul>
    <form method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="rows">
        <table class="table table-bordered">
            <tr>
                <th width="100">所属栏目</th>
                <td>
                    <select class="form-control" name="categoryId" style="width: 200px;">
                        <option value='0'>默认顶级</option>
                        {foreach name="category" item="vo"}
                            <option value='{$vo.id}' {if condition="$vo['id'] eq $info['article_category_id']" } selected="selected" {/if} >{$vo.name}</option>
                                {foreach name="$vo['children']" item="vo2"}
                                <option value='{$vo2.id}' {if condition="$vo2['id'] eq $info['article_category_id']" } selected="selected" {/if} >└────{$vo2.name}</option>
                                {/foreach}
                        {/foreach}
                    </select>
                </td>
            </tr>
            <tr>
                <th>标题<span class="form-required">*</span></th>
                <td>
                    <input class="form-control" type="text" name="title"
                           required value="{$info['article_title']|default=''}" placeholder="请输入文章标题"/>
                </td>
            </tr>
            <tr>
                <th>作者</th>
                <td>
                    <input class="form-control" type="text" name="author" value="{$info['article_author']|default=''}" placeholder="请输入作者名称"/>
                </td>
            </tr>
            <tr>
                <th>浏览次数</th>
                <td>
                    <input class="form-control" type="text" name="view" value="{$info['article_view']|default=''}" placeholder="请输入浏览次数,默认1000-2000范围随机"/>
                </td>
            </tr>
            <tr>
                <th>缩略图</th>
                <td>
                    <div id="uploader" class="uploader-container">
                        <div id="fileList" class="uploader-list">
                            <div id="filePath" class="file-item thumbnail">
                                <img id="imgPath" src="{$info['article_thumb_image']|default='/assets/images/default-thumbnail.png'}">
                                <input type="hidden" name="thumbImage" value="{$info['article_thumb_image']|default=''}" />
                            </div>
                        </div>
                        <div id="filePicker">选择图片</div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>排序</th>
                <td>
                    <input class="form-control" type="text" name="sort" value="{$info['article_sort']|default='1000'}" placeholder="请输入排序"/>
                </td>
            </tr>
            <tr>
                <th>文章状态</th>
                <td>
                    <select class="form-control" name="status" style="width: 200px;">
                        <option value='1'>启用</option>
                        <option value='0'>禁用</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>描述</th>
                <td>
                    <textarea  class="form-control" name="description"  placeholder="请填写描述">{$info['article_description']|default=''}</textarea>
                </td>
            </tr>
            <tr>
                <th>图文详情<span class="form-required">*</span></th>
                <td>
                    <script id="editor" class="editor"  name="content" type="text/plain">{:htmlspecialchars_decode($info['article_content'])}</script>
                </td>
            </tr>
            <tr>
                <th></th>
                <td>
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="hidden" name="id" value="{$info['article_id']|default=0}" />
                        <input type="hidden" name="action" value="{$params['action']}" />
                        <button type="submit" class="btn btn-primary js-ajax-submit">提交</button>
                        <a class="btn btn-default" href="{:url('article/index')}">返回</a>
                    </div>
                </td>
            </tr>
        </table>
        </div>
    </form>
</div>
<script src="/static/admin/js/layer/layer.js"></script>
<script type="text/javascript">
    $(function() {
        //初始化UE编辑器
        UE.getEditor('editor');
        var uploader = WebUploader.create({
            auto: true,
            swf: '/static/admin/js/webuploader/Uploader.swf',
            server: "{:url('General/upload')}",
            pick: {
                id:'#filePicker',
                multiple:true,
                label: '点击选择图片'
            },
            quality: 100,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        uploader.on( 'uploadSuccess', function(file, res) {
            if(res.errorCode === 200) {
                $('#imgPath').attr('src', res.data.url);
                $('input[name=thumbImage]').val(res.data.url);
            }
            $('#filePath').addClass('upload-state-done');
        });

        uploader.on( 'uploadError', function() {
            var $li = $('#filePath'),
                $error = $li.find('div.error');
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }
            $error.text('上传失败');
        });

        $(".js-ajax-submit").click(function () {
            var action = "{$params['action']}";
            $.ajax({
                url: "{:url('article/articleOperateAjax')}",
                type: "POST",
                data: $(".js-ajax-form").serialize(),
                processData: false,
                contentType: false,
                dataType: 'json',
                async: false,
                success: function (res) {
                    if (res.errorCode === 200) {
                        layer.confirm(res.message, {
                            btn:['确认','取消'],
                            success:function(){
                                this.enterEsc = function (event) {
                                    if (event.keyCode === 13) {
                                        $(".layui-layer-btn0").click();
                                        return false;
                                    }
                                };
                                $(document).on('keydown', this.enterEsc);

                                $(".layui-layer-btn0").on("click",function() {
                                    if (action === "add") {
                                        window.location.href = "{:url('article/articleOperate')}";
                                    } else {
                                        window.location.href = "{:url('article/index')}";
                                    }
                                    return false
                                })
                            },
                            end:function(){
                                $(document).off('keydown',this.enterEsc);
                            }
                        });
                    } else {
                        layer.alert(res.message, {
                            title: '提示',
                            icon: 2
                        });
                    }
                }
            });
            return false;
        });
    });
</script>

</body>
</html>
